<script setup lang="ts">
import { computed } from 'vue';
import type { PopoverPlacement } from 'naive-ui';
import { $t } from '@/locales';

defineOptions({ name: 'ThemeSchemaSwitch' });

interface Props {
    /** Theme schema */
    themeSchema: UnionKey.ThemeScheme;
    /** Show tooltip */
    showTooltip?: boolean;
    /** Tooltip placement */
    tooltipPlacement?: PopoverPlacement;
}

const props = withDefaults(defineProps<Props>(), {
    showTooltip: true,
    tooltipPlacement: 'bottom'
});

interface Emits {
    (e: 'switch'): void;
}

const emit = defineEmits<Emits>();

function handleSwitch() {
    emit('switch');
}

const icons: Record<UnionKey.ThemeScheme, string> = {
    light: 'material-symbols:sunny',
    dark: 'material-symbols:nightlight-rounded',
    auto: 'material-symbols:hdr-auto'
};

const icon = computed(() => icons[props.themeSchema]);

const tooltipContent = computed(() => {
    if (!props.showTooltip) return '';

    return $t('icon.themeSchema');
});
</script>

<template>
    <ButtonIcon
        :icon="icon"
        :tooltip-content="tooltipContent"
        :tooltip-placement="tooltipPlacement"
        @click="handleSwitch"
    />
</template>

<style scoped></style>
